<template>
  <div>
    <el-table :data="tableList" style="width: 100%">
      <el-table-column label="序号" width="80">
        <template slot-scope="scope">
          <span>{{ (pageIndex - 1) * 10 + scope.$index + 1 }}</span>
        </template>
      </el-table-column>
      <!-- 表格内容, prop 与传入 数据数组中每一项对应 -->
      <el-table-column label="设备编号">
        <template slot-scope="scope">
          {{ scope.row.innerCode }}
          <!-- 插槽写法, 与 prop="age" 效果相同, 特殊情况可使用 -->
        </template>
      </el-table-column>
      <!--设备型号  -->
      <el-table-column prop="type.name" label="设备型号"> </el-table-column>
      <el-table-column prop="node.name" label="详细地址" width="200" > </el-table-column>
      <el-table-column prop="vmStatus" label="运营状态" width="200">
         <template slot-scope="scope">
      <span> {{ scope.row.vmStatus===1?'运营':scope.row.vmStatus===0?'未投放':'撤机'}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="设备状态" width="300">
        <template>
          <div class="seetingStatue">
            <div class="Li">离线</div>
            <div class="Goods">货道</div>
            <div class="Goods">传动轴</div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200">
        <!-- 三个操作按钮 点击 触发对应三个父组件函数, 并传出 当前行信息 (scope.row) -->
        <template slot-scope="scope">
          <span class="blue" @click="$emit('look', scope.row.innerCode)">查看详情</span
          >&emsp;
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  props: {
    // 数据列表
    tableList: {
      type: Array,
      require: true
    },
    // 页数, 渲染序号使用
    pageIndex: {
      type: Number,
      required: true
    }
  }

}
</script>

<style lang="scss" scoped>
.el-table {
  width: 100%;
  ::v-deep .el-table__header-wrapper {
    .el-table__header {
      width: 100% !important;
      thead tr {
        border-radius: 5px;
        overflow: hidden;
        th {
          background-color: #f3f6f8;
          color: #666;
          border: 0;
        }
      }
    }
  }
  ::v-deep .el-table__body-wrapper {
    .el-table__body {
      width: 100% !important;
      tbody tr td {
        border: 0;
      }
    }
  }
 .seetingStatue{
  display: flex;width: 400px;
  // font-size: 12px;
  // color: #fff;
  .Li{
    height: 23px;

    padding: 0 12px;
    text-align: center;
    border-radius: 14px;
    text-align: center;
    color: #fff;
    line-height: 23px;
    background: #ff665f linear-gradient(135deg,#ffb043,#ffc020);
  } .Goods{
    height: 23px;
    padding: 0 12px;
    background: #ff665f linear-gradient(135deg,#3fc997,#4bda98);
    border-radius: 14px;
    text-align: center;
    color: #fff;
    line-height: 23px;
    margin-left: 10px;
  }
 }

}

</style>
